<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>GET 请求</title>
  </head>
  <body>
    <!-- <form action="https://www.imooc.com/api/http/search/suggest" method="get">
      <input type="text" name="username" />
      <input type="text" name="words" />
      <input type="password" name="password" />
      <input type="submit" value="提交" />
    </form> -->

    <script>
      // 1.携带数据
      // GET 请求不能通过请求体携带数据，但可以通过请求头携带
      // const url =
      //   'https://www.imooc.com/api/http/search/suggest?words=js&username=alex&age=18';
      // const xhr = new XMLHttpRequest();

      // xhr.onreadystatechange = () => {
      //   if (xhr.readyState != 4) return;

      //   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      //     console.log(xhr.responseText);
      //   }
      // };

      // xhr.open('GET', url, true);

      // xhr.send(null);

      // 不会报错，但不会发送数据
      // xhr.send('sex=male');

      // 2.数据编码
      // 如果携带的数据是非英文字母的话，比如说汉字，就需要编码之后再发送给后端，不然会造成乱码问题
      // 可以使用 encodeURIComponent() 编码
      const url = `https://www.imooc.com/api/http/search/suggest?words=${encodeURIComponent(
        '前端'
      )}`;
      const xhr = new XMLHttpRequest();

      xhr.onreadystatechange = () => {
        if (xhr.readyState != 4) return;

        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
          console.log(xhr.responseText);
        }
      };

      xhr.open('GET', url, true);

      xhr.send(null);
    </script>
  </body>
</html>
